<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="ap">
<p>
    <input type="text" placeholder="猜字游戏" v-model="guesed" >
    <!-- placeholder【属性提供可描述输入字段预期值的提示性信息】
    该提示会在输入字段为空的时候显示，并会在字段获得焦点时消失
    -->
</p>
<p>{{gu}}</p>
<!-- 在p元素中，把原来的 -->
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        new Vue({
            el:"#ap",
            data:{
                guesed:''
            },
            computed:{
                gu(){
                    const key = 66;
                    const value = parseInt(this.guesed);
                    if(isNaN(value))
                    return'请猜一个介于1-100之间的整数'
                    if(value === key )
                    return'恭喜你猜对了'
                    if(value>key)
                    return'猜大了'
                    return'猜小了'
                }
            }
        })
    </script>
</body>
</html>